import { Tag } from '@components/Tag';

# 生态

## Rstack

Rstack 是一个以 Rspack 为核心的 JavaScript 统一工具链，具有优秀的性能和一致的架构。

### Rsbuild

<Tag color="geekblue">构建工具</Tag>

[Rsbuild](https://github.com/web-infra-dev/rsbuild) 是由 Rspack 驱动的高性能构建工具，它默认包含了一套精心设计的构建配置，提供开箱即用的开发体验，并能够充分发挥出 Rspack 的性能优势。

### Rslib

<Tag color="geekblue">库开发工具</Tag>

[Rslib](https://github.com/web-infra-dev/rslib) 是一个基于 Rsbuild 的 npm 库开发工具，它复用了 Rsbuild 精心设计的构建配置和插件系统，使开发者能够以简单直观的方式创建 JavaScript 库。

### Rspress

<Tag color="geekblue">静态站点生成器</Tag> <Tag color="purple">React</Tag>

[Rspress](https://github.com/web-infra-dev/rspress) 是一个基于 Rsbuild、React 和 MDX 的静态站点生成器，内置了一套默认的文档主题，你可以通过 Rspress 来快速搭建一个文档站点，同时也可以自定义主题，来满足个性化静态站需求，比如博客站、产品主页等。

### Rsdoctor

<Tag color="geekblue">构建分析工具</Tag>

[Rsdoctor](https://github.com/web-infra-dev/rsdoctor) 是一个针对 Rspack 的构建分析工具，可以直观地展示构建过程，例如编译时间、编译前后的代码变化、模块引用关系、重复模块等。如果你需要排查构建产物或构建时编译问题，可以使用 Rsdoctor。

### Rstest

<Tag color="geekblue">测试框架</Tag>

[Rstest](https://github.com/web-infra-dev/rstest) 是一个基于 Rspack 的测试框架，它为 Rspack 生态提供了全面、一流的支持，能够轻松集成到现有的 Rspack 项目中。

### Rslint

<Tag color="geekblue">代码检查工具</Tag>

[Rslint](https://github.com/web-infra-dev/rslint) 是一个基于 typescript-go 的高性能 JavaScript 和 TypeScript 代码检查工具。它与 ESLint 及 TypeScript-ESLint 生态系统高度兼容，可实现无缝替换，并提供极快的代码检查速度。

## 社区集成

### Angular Rspack

<Tag color="geekblue">构建工具</Tag> <Tag color="purple">Angular</Tag>

[Angular Rspack](https://github.com/nrwl/angular-rspack) 是一套工具链和插件集合，能够让你简单直接地使用 Rspack 和 Rsbuild 构建 Angular 应用。

### Docusaurus

<Tag color="geekblue">静态站点生成器</Tag> <Tag color="purple">React</Tag>

[Docusaurus](https://docusaurus.io/) 是一个用于快速构建、部署和维护开源项目网站的静态站点生成器。

Docusaurus 从 v3.6 开始支持使用 Rspack 作为打包工具，详见 [Docusaurus Faster](https://docusaurus.io/blog/releases/3.6#docusaurus-faster)。

### Modern.js

<Tag color="geekblue">Web 框架</Tag> <Tag color="purple">React</Tag>

[Modern.js](https://modernjs.dev/) 是一个基于 Rsbuild 实现的渐进式 React 框架，支持嵌套路由、服务器端渲染（SSR）和模块联邦，并提供开箱即用的 CSS 解决方案。

### Next.js

<Tag color="geekblue">Web 框架</Tag> <Tag color="purple">React</Tag>

[Next.js](https://nextjs.org/) 是一个用于构建全栈 Web 应用的 React 框架。它允许你使用 React 组件构建用户界面，并使用 Next.js 进行额外功能和优化。

Rspack 团队与 Next.js 团队合作提供了 `next-rspack` 插件。该插件允许你使用 Rspack 作为 Next.js 的打包工具，详见 [Next.js 指南](/guide/tech/next)。

### Nuxt

<Tag color="geekblue">Web 框架</Tag> <Tag color="purple">Vue</Tag>

[Nuxt](https://nuxt.com/) 是一个开源框架，提供了直观且可扩展的方式来使用 Vue.js 创建类型安全、高性能和生产级的全栈 Web 应用程序和网站。

Nuxt v3.14 引入了对 Rspack 的官方支持，详见 [Nuxt 3.14](https://nuxt.com/blog/v3-14)。

### Nx

<Tag color="geekblue">构建系统</Tag> <Tag color="purple">Monorepo</Tag>

[Nx](https://nx.dev/) 是一个强大的开源构建系统，提供了工具来提升生产力、优化 CI 性能和维护代码质量。

Rspack 团队与 Nx 团队合作提供了 [Rspack Nx 插件](https://nx.dev/nx-api/rspack)。该插件包含在 Nx Workspace 中管理 Rspack 项目的执行器、生成器和实用工具。

### Rspeedy

<Tag color="geekblue">构建工具</Tag> <Tag color="purple">Lynx</Tag>

[Rspeedy](https://lynxjs.org/rspeedy/) 是一个基于 Rspack 的构建工具，专门为 Lynx 应用设计。[Lynx](https://lynxjs.org/) 是一套帮助 Web 开发者复用现有经验、通过一份代码同时构建移动端原生界面与 Web 端界面的技术方案。

### Re.Pack

<Tag color="geekblue">构建工具</Tag> <Tag color="purple">React Native</Tag>

[Re.Pack](https://github.com/callstack/repack) 是一个用于开发 React Native 应用的构建工具。

Re.Pack v5 使用 Rspack 和 React Native 社区 CLI 的插件系统，允许你使用 Rspack 打包你的应用，并轻松切换到 Metro。

### Storybook

<Tag color="geekblue">UI 开发</Tag>

[Storybook Rsbuild](https://storybook.rsbuild.rs/) 允许你使用 Rsbuild 作为 Storybook 的构建工具，并提供了 React 和 Vue 等 UI 框架的集成。

## 更多

访问 [awesome-rspack](https://github.com/web-infra-dev/awesome-rspack) 来发现更多 Rspack 生态中的项目。
